<template>
  <div class="home-box">
    <!-- 背景图 -->
    <img :src="assetsImageUrl + '/images/home/bg.png'" alt="" class="bg">

    <!-- 规则以及我的奖品 -->
    <div class="rule-prize">
      <!-- <img src="/images/home/rule-icon.png" alt="" @click="()=>  state.rulePage = true"> -->
      
      <div class="toolbar-btn" @click="() => appStore.setRulePage(true)">
        <div class="text-vertical">
          <span>活</span>
          <span>动</span>
          <span>规</span>
          <span>则</span>
        </div>
      </div>
      <div class="toolbar-btn" @click="() => state.prizePage = true">
        <div class="text-vertical">
          <span>我</span>
          <span>的</span>
          <span>奖</span>
          <span>品</span>
        </div>
      </div>
      <div class="toolbar-btn" @click="handleShare">
        <div class="text-vertical">
          <span>分</span>
          <span>&nbsp;</span>
          <span>享</span>
        </div>
      </div>
    </div>

    <!-- 标题 -->
    <div class="title">
      <img :src="assetsImageUrl + '/images/home/home-title.jpg'" alt="">
    </div>
    <!-- 按钮 -->
    <div class="footer">
      <!-- <img src="/images/home/btn.png" alt="">   -->
      <div class="box_shadow">
        <div class="tr_t" @click="goGame">开启挑战</div>
      </div>
      <!-- <div class="box_shadow">
        <div class="tr_t" @click="goRanking">步数排行榜</div>
      </div> -->
    </div>

    

 
    <Prize @handleClose="state.prizePage = false" :isShow="state.prizePage" v-if="state.prizePage"></Prize>
    <Popover @handleClose="state.popoverPage = false" :isShow="state.popoverPage" msg="本次活动仅限UNI认证车主参与"></Popover>
    <!-- 奖励弹窗 -->
    <!-- <Popover
        :title="state.popoverTitle"
        :isShow="state.PopoverRank"
        :tips="state.popoverTips"
        :icon="state.popoverIcon"
        @handleClose="state.PopoverRank = false;">
        <div>
          在U星能排行榜中排名第{{state.popoverRack}}名<br />
          {{ state.popoverMsg }}
        </div>
    </Popover> -->

    <GameOver
        :title="state.popoverTimesTitle"
        :isShow="state.popoverTimes"
        :show-share="state.showShare"
        @showShareModal="handleShare"
        @handleClose="state.popoverTimes = false;">
        <div>
          <p v-html="state.popoverTimesMsg"></p>
          <!-- {{ state.popoverTimesMsg }} -->
        </div>
    </GameOver>
    <NeedShare 
      :is-show="state.needShare"
      @handle-close="state.needShare = false"
    />
    <!-- <van-dialog v-model:show="state.myDialog" title="安全验证" show-cancel-button>
      <div id='sc'></div>
    </van-dialog> -->
    <van-action-sheet v-model:show="awscShow" title="安全验证">
      <div class="awsc-content"><van-loading type="spinner" /><div id='nc'></div></div>
      <!-- <van-button type="default" @click="state.myDialog = false">取消</van-button> -->
    </van-action-sheet>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref, nextTick } from "vue"
import { useRouter } from 'vue-router'
import { showFailToast } from 'vant'

import Prize from "../components/Prize.vue"
import Popover from "../components/MyPopover.vue"
import { getUserData, userAuth, weekGift, gameTimes, shareRecord } from "../api/index"
import utils from "../utils";
import useApp from "../hooks/useApp"
import NeedShare from "../components/NeedShare.vue"
import { useStore } from "../store/useApp"
import GameOver from "../components/GameOver.vue"

const router = useRouter()
const {appShare,appState, initSlider} = useApp()
const appStore = useStore()
const assetsImageUrl = ref(import.meta.env.VITE_ASSETS_IMAGE_URL)
const awscShow = ref(false)
const state = reactive(
  {
    time: null,
    rulePage: false,
    prizePage: false,
    popoverPage: false,
    PopoverRank: false,
    popoverTitle: '恭喜您',
    popoverIcon: null,
    popoverMsg: '',
    popoverTips: false,
    popoverRack: null,
    // successPage: false,
    myDialog: false,
    numTimes: 0,
    popoverTimes: false,
    popoverTimesTitle: '',
    popoverTimesMsg: '',
    errNum: 0,
    needShare: false,
    showShare:false
  }
)

let ic = null
// appKey, scene
const appKey = 'FFFF0N0000000000B5BA';
const scene = 'ic_activity_h5';



// 获取游戏剩余次数
function getGameTimes() {
  gameTimes().then(res => {
    const { error_code,data,msg } = res
    if (data&&data.remain_game_num  < 1) {
      state.popoverTimes = true;
      state.popoverTimesTitle = '很遗憾'
      state.popoverTimesMsg = data.pop_share ? '投掷次数已用完<br>赶快分享给好友获得投掷机会吧' : '今日次数已用完，请明日再来';
      state.showShare = data.pop_share
      // state.popoverTimesIcon = ''
      // state.popoverTimesTips = false
      return;
    } else {
      if (error_code === 0) {
        router.push('/game');
      } else {
        state.popoverTimes = true;
    state.popoverTimesTitle = '很遗憾'
    state.popoverTimesMsg = msg;
      }
      
    }
  }).catch((e) => {
    state.popoverTimes = true;
    state.popoverTimesTitle = '很遗憾'
    console.log(e,'errrrr')
    state.popoverTimesMsg = e.msg;
  })
}

async function goGame() {
    if (appStore.userInfo.is_robot) {
      // state.myDialog = true;
      awscShow.value = true;
      await nextTick();
      !ic && initSlider((captchaVerifyParam) => {
        userAuth({captchaVerifyParam}).then(res => {
          if (res.error_code === 0) {
            awscShow.value = false;
            // router.push('/game');
            getUserData().then((data) => {
              utils.setUserInfo(data)
              appStore.setUserInfo(data)
            })
            getGameTimes();
          } else {
            showFailToast(res.msg)
          }
        })
      });
    } else {
      // router.push('/game')
      getGameTimes();
    }
  // })
}
function handleShare() {
  // state.needShare = true
  appShare()
  setTimeout(() => {
    // 记录分享
    shareRecord()
  }, 3000);
}

// 周度奖品
function handleGetWeekGift() {
  weekGift().then(res => {
    const { data } = res;
    if (!data) return;

    state.PopoverRank = true;
    state.popoverRack = data.rack;
    state.popoverMsg = `获得${data.name}${data.content}`;
    state.popoverIcon = data.icon;
  }).catch(e => {
    setTimeout(() => {
      if (state.errNum < 10) {
        state.errNum++;
        handleGetWeekGift();
      }
    }, 100)
  })
}

function goRanking() {

  // router.push("/ranking")
  router.replace("/ranking")
}

onMounted(() => {
  
})
</script>
<style scoped lang="scss">
.home-box ::v-deep(.van-action-sheet__header) {
  font-size: 30px;
}
.home-box ::v-deep(.van-action-sheet__close) {
  font-size: 36px;
}
.awsc-content {
  display: flex;
  justify-content: center;
  min-height: 800px;
  align-items: center;
  
}

#sc {
  margin: 50px 0 80px 0;
}
.home-box {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  /* background: url("/images/home/bg.jpg") no-repeat;
  background-size: cover; */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover; 
}

.title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 180px;
  left: 0;
  -webkit-animation: bounce-in-top 1.1s .1s both;
  animation: bounce-in-top 1.1s .1s both;



}

.title>img {
  width: 566px;

}

.footer {
  display: flex;
  /* justify-content: center; */
  align-items: center;
  flex-direction: column;
  position: absolute;
  bottom: 22vw;
  /* width: 100%;
  height: 333px;
  background: url("/images/home/footer_bg.png") no-repeat;
  background-size: cover;
  padding-top: 20px;
  box-sizing: border-box; */
}

.footer .box_shadow {
  width: 348px;
  height: 120px;
  margin-top: 30px;
  font-family: "ChangAnunitype-Bold";
  /* box-shadow: 7px 10px 35px rgba(23, 105, 175, .57);
  border-radius: 30px; */
}

.footer .tr_t {
  width: 100%;
  height: 100%;
  /* margin-top: -3px; */
  text-align: center;
  line-height: 138px;
  text-align: center;
  color: #fff;
  font-family: "ChangAnunitype-Bold";
  font-size: 36px;
  letter-spacing: 4px;
  // background: url(#{$base_path}/images/home/btn_bg.png) no-repeat;
  background: url(#{$base_path}/images/home/start-btn.png) no-repeat;
  background-size: 100% 100%;
}

.btn {
  position: absolute;
  bottom: 10vh;
  width: 351px;
  height: 92px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #020101;
  border-radius: 46px;
  font-family: "ChangAnunitype-Bold";
  font-size: 46px;
  letter-spacing: 4px;
  background-color: #ff4a62;
  color: #fff;
  /* transition: all 0.4s; */
  -webkit-animation: jello-horizontal 0.9s both;
  animation: jello-horizontal 0.9s both;
}

.btn:hover {
  background-color: #9bdced;
  color: #2e669f;
  border: 1px solid #0f5ba8;

}

.rule-prize {
  position: absolute;
  right: 0;
  top: 180px;
  /* width: 120px; */
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  z-index: 9;
}

.rule-prize .toolbar-btn {
  margin-bottom: 10px;
  padding:  2px;
}

.rule-prize .text-vertical {
  /* writing-mode: vertical-rl; */
  display: flex;
  flex-direction: column;
  /* text-orientation: mixed; */
  // background-image: linear-gradient(0deg, rgb(77,77,117) 0%, rgb(63,58,98) 100%);
  // box-shadow: inset 0px -17px 50px 0px rgba(197, 198, 255, 0.56);
  background-image: url(#{$base_path}/images/home/sider-bg.png);
  background-size: 100% 100%;
  // border-top-left-radius: 10px;
  // border-bottom-left-radius: 10px;
  line-height: 1;
  padding: 26px 10px;
  color: #fff;
  text-indent: 6px;
}

.rule-prize>img {
  width: 100%;
}

.rule-prize>div {
  width: 100%;
  font-family: "ChangAnunitype-Regular";
  font-size: 30px;
  /* padding: 5px 0px; 
  /* background-color: rgba(0, 0, 0, 0.2); */
  // background-color: #646794;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  letter-spacing: 2px;
}

.share_btn {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 10px;
  top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background: #ff4a62; */
  z-index: 1;
}

.share_btn>img {
  width: 53px;
  height: 53px;
}

.share_indication {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 9;
  background: rgba(0, 0, 0, 0.8);
}

.share_indication>img {
  width: 500px;
  position: absolute;
  top: 20px;
  right: 140px;
}


@keyframes shake {

  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

/* 

动画参考
https://animista.net/play/basic
*/

/* ----------------------------------------------
 * Generated by Animista on 2023-5-6 10:27:13
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation jello-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}


@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
    transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }

  55% {
    -webkit-transform: translateY(-65px);
    transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  72% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  81% {
    -webkit-transform: translateY(-28px);
    transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  95% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

/* @media all and (min-width:414px) {
  .title {
    top: 5vw;
  }

  .title>img {
    width: 70vw;
  }
} */
</style>